<div id="content_header">
  <h3>Register a new client</h3>
</div>

<!-- MODAL CONTACT -->
<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">Your Contact Person</h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal" role="form" ng-submit="addContact()">

      <div class="form-group">
        <label for="ct">Contact Type</label>
        <select name="ct" id="ct" class="form-control" ng-model="contact.ContactType.Id" ng-options="ct.Id as ct.Name for ct in contacttypes">
          <option value="" ng-hide="contact.ContactType.Id">Select Contact Type</option>
        </select>
      </div>

      <div class="form-group">
        <label for="city">Cities</label>
        <select name="city" id="city" class="form-control" ng-model="contact.City.Id" ng-options="city.Id as city.Name for city in cities">
          <option value="" ng-hide="contact.City.Id">Select City</option>
        </select>
      </div>

      <div class="form-group">
        <label for="address">Address</label>
        <textarea name="address" id="address" cols="30" rows="10" class="form-control" ng-model="contact.Address"></textarea>
      </div>

      <div class="form-group">
        <label for="postal">Postal Code</label>
        <input type="text" name="postal" id="postal" class="form-control" ng-model="contact.PostalCode">
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" class="form-control" ng-model="contact.Email">
      </div>

      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" name="phone" id="phone" class="form-control" ng-model="contact.Phone">
      </div>

      <div class="form-group">
        <label for="fax">Fax</label>
        <input type="text" name="fax" id="fax" class="form-control" ng-model="contact.Fax">
      </div>

      <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </div>
</script>

<!-- TYPEAHEAD TEMPLATE -->
<script type="text/ng-template" id="customTemplate.html">
  <a>
    <dl>
      <dt>Address</dt>
      <dd><i class="simple-icon-pointer"></i> <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span></dd>
    </dl>
  </a>
</script>

<!-- SLIDE PANEL -->
<div style="padding:20px" id="form">
  <h3>Add New Contacts <a href="" ng-click="psForm = !psForm"><i class="simple-icon-close"></i></a></h3>
  <hr>

  <form  name="studentForm" role="form" ng-submit="searchContacts()">
    <div class="form-group input-group">
      <input type="text" ng-model="customSelected" placeholder="contact person" typeahead="contact as (contact.Address + ' - ' + contact.ContactType.Name ) for contact in searchContacts($viewValue)" typeahead-loading="loadingLocations" typeahead-template-url="customTemplate.html" class="form-control" typeahead-on-select="onSelect($item, $model, $label)">
    </div>
  </form>
  <div class="row" ng-show="contactResults.length > 0">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h4>Contact Results</h4>
      <div class="row">
        <div class="col-xs-6 col-md-6 col-lg-6" ng-repeat="contact in contactResults" ng-if="valid(contact)">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <div class="btn-group pull-right">
                <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
                  Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="" ng-click="selectContact(contact)">Use This Contact Detail</a></li>
                </ul>
              </div>
              <h4 class="panel-title">{{ contact.ContactType.ContactTypeLabel }}</h4>
            </div>
            <div class="panel-body">
              <dl>
                <dt>Address</dt>
                <dd>{{ contact.Address }}</dd>
                <dt>City</dt>
                <dd>{{ contact.City.CityName }}</dd>
                <dt>Postal Code</dt>
                <dd>{{ contact.PostalCode }}</dd>
                <dt>Phone</dt>
                <dd>{{ contact.Phone }}</dd>
                <dt>Email</dt>
                <dd>{{ contact.Email }}</dd>
                <dt>Fax</dt>
                <dd>{{ contact.Fax }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
  </div>
  <a href="" class="btn btn-primary" ng-click="openModal(payment)">New Detailed Contact</a>
</div>

<!-- FORM CLIENT -->
<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="form" role="form" ng-submit="add()">

      <div class="form-group" ng-class="{ 'has-error': errors.Name}">
        <label class="required" for="Name">Name</label>
        <input type="text" name="Name" class="form-control" id="Name" placeholder="Input field" ng-model="newItem.Name" required>
        <error-widget field="errors.Name"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Code}">
        <label class="required" for="Code">Code</label>
        <input type="text" name="Code" class="form-control" id="Code" placeholder="Input field" ng-model="newItem.Code" required>
        <error-widget field="errors.Code"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.InvoiceTo}">
        <label class="required" for="InvoiceTo">InvoiceTo</label>
        <input type="text" name="InvoiceTo" class="form-control" id="InvoiceTo" placeholder="Input field" ng-model="newItem.InvoiceTo" required>
        <error-widget field="errors.InvoiceTo"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.InvoiceToPosition}">
        <label class="required" for="InvoiceToPosition">InvoiceToPosition</label>
        <input type="text" name="InvoiceToPosition" class="form-control" id="InvoiceToPosition" placeholder="Input field" ng-model="newItem.InvoiceToPosition" required>
        <error-widget field="errors.InvoiceToPosition"></error-widget>
      </div>

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

          <h3>Contact Information <a pageslide="right" ps-speed="0.25" href="#form" ps-auto-close="true" ps-open="psForm" ng-click="psForm = !psForm"><i class="simple-icon-notebook"></i></a></h3>
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" ng-repeat="contact in newItem.Contacts">
              <dl>
                <dt>{{ contact.ContactType.Name }} <a href="" ng-click="removeContact(contact)"><i class="simple-icon-trash"></i></a></dt>
                <dd class="text-muted"><i class="simple-icon-pointer"></i> {{ contact.Address }}, {{ contact.City.Name }}, {{ contact.PostalCode }}</dd>
                <dd class="text-muted"><i class="simple-icon-envelope-open"></i> {{ contact.Email }}</dd>
                <dd class="text-muted"><i class="simple-icon-call-end"></i> {{ contact.Phone }}</dd>
                <dd class="text-muted"><i class="simple-icon-envelope-letter"></i> {{ contact.Fax }}</dd>
              </dl>
            </div>
          </div>

        </div>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</div>